<template>
  <div class="container">
    <div class="time">10:27</div>
    <div class="box1">
      <div class="spfl">商品分类</div>
    </div>
    <div class="sousuo">
      <div class="p1"><img src="../assets/fenlei/搜索@2x.png" /></div>
    </div>
    <div class="box2">
      <div class="zhonglei">
        <div class="xinpin">
          <div class="xinpin1">新品</div>
        </div>
        <div class="gaoduan">
          <div class="gaoduan1">高端定制</div>
        </div>
        <div class="zhanting">
          <div class="zhanting1">展厅现货</div>
        </div>
        <div class="keting">
          <div class="keting1">客厅</div>
        </div>
        <div class="woshi">
          <div class="woshi1">卧室</div>
        </div>
        <div class="shufang">
          <div class="shufang1">书房</div>
        </div>
        <div class="canting">
          <div class="canting1">餐厅</div>
        </div>
      </div>
      <div class="shangpin">
        <div class="diyihang">
          <div class="BZDZLCX">
            <div class="BZDZLCX1"><img src="../assets/fenlei/p1@2x.png" /></div>
            <div class="BZDZLCX2">BZDZLCX系列</div>
          </div>
          <div class="BZDZLLY">
            <div class="BZDZLLY1"><img src="../assets/fenlei/p2@2x.png" /></div>
            <div class="BZDZLLY2">BZDZLLY系列</div>
          </div>
        </div>
        <div class="dierhang">
          <div class="CGZLJ">
            <div class="CGZLJ1"><img src="../assets/fenlei/p3@2x.png" /></div>
            <div class="CGZLJ2">CGZLJ系列</div>
          </div>
          <div class="CHLBS">
            <div class="CHLBS1"><img src="../assets/fenlei/p4@2x.png" /></div>
            <div class="CHLBS2">CHLBS系列</div>
          </div>
        </div>
        <div class="disanhang">
          <div class="CGLXY">
            <div class="CGLXY1"><img src="../assets/fenlei/p5@2x.png" /></div>
            <div class="CGLXY2">CGLXY系列</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="a1">
        <div class="b1"><img src="../assets/fenlei/home@2x.png" /></div>
        <div class="c1">首页</div>
      </div>
      <div class="a2">
        <div class="b2"><img src="../assets/fenlei/cla_click@2x.png" /></div>
        <div class="c2">分类</div>
      </div>
      <div class="a3">
        <div class="b3"><img src="../assets/fenlei/shopping@2x.png" /></div>
        <div class="c3">购物车</div>
      </div>
      <div class="a4">
        <div class="b4"><img src="../assets/fenlei/user@2x.png" /></div>
        <div class="c4">个人中心</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.time {
  width: 88px;
  height: 38px;
  font-size: 28px;
  font-family: Segoe UI-Regular, Segoe UI;
  font-weight: 400;
  color: #000000;
  line-height: 0px;
  margin-left: 24px;
  margin-top: 24px;
  text-align: center;
  border: 1px solid rgb(255, 255, 255);
}
.container {
  width: 750px;
  background: #ffffff;
  margin: 0 auto;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgb(255, 255, 255);
}
.box1 {
  width: 750px;
  height: 88px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  margin-top: 26px;
  text-align: center;
  border: 1px solid rgb(255, 255, 255);
}
.spfl {
  width: 144px;
  height: 46px;
  font-size: 36px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #000000;
  line-height: 0px;
  margin-top: 22px;
  margin-left: 304px;
  border: 1px solid rgb(255, 255, 255);
}
.sousuo {
  width: 690px;
  height: 68px;
  background: #f2f2f2;
  border-radius: 34px 34px 34px 34px;
  margin-top: 18px;
  margin-left: 32px;
  border: 1px solid rgb(255, 255, 255);
}
.p1 {
  width: 28px;
  height: 28px;
  opacity: 1;
  border: 2px solid #f2f2f2;
  margin-top: 20px;
  margin-left: 36px;
}
.box2 {
  width: 750px;
  background: #ffffff;
  border: 1px solid rgb(255, 255, 255);
  display: flex;
}
.zhonglei {
  width: 181px;
  background: #f0f0f0;
  height: 1400px;
}
.xinpin {
  width: 181px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 2px solid #f0f0f0;
}
.xinpin1 {
  width: 56px;
  height: 36px;
  font-size: 28px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-top: 40px;
  margin-left: 62px;
}
.gaoduan {
  width: 181px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 2px solid #f0f0f0;
}
.gaoduan1 {
  width: 112px;
  height: 36px;
  font-size: 28px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-top: 40px;
  margin-left: 35px;
}
.zhanting {
  width: 181px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 2px solid #f0f0f0;
}
.zhanting1 {
  width: 112px;
  height: 36px;
  font-size: 28px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-top: 40px;
  margin-left: 35px;
}
.keting {
  width: 181px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 2px solid #f0f0f0;
}
.keting1 {
  width: 56px;
  height: 36px;
  font-size: 28px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-top: 40px;
  margin-left: 62px;
}
.woshi {
  width: 181px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 2px solid #f0f0f0;
}
.woshi1 {
  width: 56px;
  height: 36px;
  font-size: 28px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-top: 40px;
  margin-left: 62px;
}
.shufang {
  width: 181px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 2px solid #f0f0f0;
}
.shufang1 {
  width: 56px;
  height: 36px;
  font-size: 28px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-top: 40px;
  margin-left: 62px;
}
.canting {
  width: 181px;
  height: 80px;
  background: #f0f0f0;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 2px solid #f0f0f0;
}
.canting1 {
  width: 56px;
  height: 36px;
  font-size: 28px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-top: 40px;
  margin-left: 62px;
}
.diyihang {
  width: 568px;
  display: flex;
}
.BZDZLCX {
  width: 200px;
  height: 230px;
  margin-left: 54px;
  margin-top: 0px;
  border: 2px solid #ffffff;
}
.BZDZLCX2 {
  width: 154px;
  height: 30px;
  font-size: 24px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-left: 24px;
}
.BZDZLLY {
  width: 200px;
  height: 230px;
  margin-left: 46px;
  margin-top: 0px;
  border: 2px solid #ffffff;
}
.BZDZLLY2 {
  width: 150px;
  height: 30px;
  font-size: 24px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-left: 26px;
}
.dierhang {
  width: 568px;
  display: flex;
}
.CGZLJ {
  width: 200px;
  height: 230px;
  border: 2px solid #ffffff;
  margin-left: 54px;
  margin-top: 0px;
}
.CGZLJ2 {
  height: 30px;
  font-size: 24px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-left: 40px;
}
.CHLBS {
  width: 200px;
  height: 230px;
  border: 2px solid #ffffff;
  margin-left: 46px;
}
.CHLBS2 {
  width: 124px;
  height: 30px;
  font-size: 24px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-left: 38px;
}
.CGLXY {
  width: 200px;
  height: 230px;
  border: 2px solid #ffffff;
  margin-left: 54px;
  margin-top: 0px;
}
.CGLXY2 {
  height: 30px;
  font-size: 24px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-left: 38px;
}
.footer {
  width: 748px;
  height: 98px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  position: fixed;
  display: flex;
  bottom: 0;
}
.a1 {
  height: 80px;
  width: 50px;
  margin-left: 102px;
  margin-top: 14px;
}
.c1 {
  width: 48px;
  height: 30px;
  font-size: 24px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-top: 10px;
}
.a2 {
  height: 80px;
  width: 50px;
  margin-left: 114px;
  margin-top: 14px;
}
.c2 {
  width: 48px;
  height: 30px;
  font-size: 24px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #2a4458;
  line-height: 0px;
  margin-top: 10px;
}
.a3 {
  height: 80px;
  width: 80px;
  margin-left: 102px;
  margin-top: 14px;
}
.b3 {
  margin-left: 14px;
}
.c3 {
  height: 30px;
  font-size: 24px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #2a4458;
  line-height: 0px;
  margin-top: 10px;
}
.a4 {
  height: 80px;
  width: 50px;
  margin-left: 76px;
  margin-top: 14px;
}
.b4 {
  margin-left: 26px;
}
.c4 {
  width: 96px;
  height: 30px;
  font-size: 24px;
  font-family: Microsoft YaHei UI-Regular, Microsoft YaHei UI;
  font-weight: 400;
  color: #505050;
  line-height: 0px;
  margin-top:10px;
  
}
</style>